<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项应用</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>待办事项</h1>
        
        <!-- 标签筛选区域 -->
        <div class="tag-filter-container">
            <span>按标签筛选：</span>
            <div id="tag-filters" class="tag-filters">
                <span class="tag-filter active" data-tag="all">全部</span>
                <!-- 标签筛选按钮将在JS中动态添加 -->
            </div>
        </div>
        
        <!-- 排序控件 -->
        <div class="sort-controls">
            <span>排序方式：</span>
            <button id="sort-created" class="sort-btn active">创建时间</button>
            <button id="sort-completed" class="sort-btn">完成状态</button>
            <button id="sort-priority" class="sort-btn">优先级</button>
            <button id="sort-due" class="sort-btn">截止日期</button>
        </div>
        
        <!-- 操作控件 -->
        <div class="action-controls">
            <button id="clear-completed" class="danger-btn">清除已完成</button>
        </div>
        
        <!-- 添加按钮 -->
        <div class="add-button-container">
            <button id="add-button" class="add-btn">添加待办事项</button>
        </div>
        
        <!-- 待办事项列表 -->
        <ul id="todo-list"></ul>
    </div>
    
    <!-- 详情编辑模态框 -->
    <div id="detail-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2 id="modal-title">编辑待办事项</h2>
            <form id="detail-form">
                <div class="form-group">
                    <label for="edit-title">标题:</label>
                    <input type="text" id="edit-title" required>
                </div>
                <div class="form-group">
                    <label for="edit-description">描述:</label>
                    <textarea id="edit-description" rows="3" placeholder="添加详细描述..."></textarea>
                </div>
                <div class="form-group">
                    <label for="edit-due-date">截止日期:</label>
                    <input type="date" id="edit-due-date">
                </div>
                <div class="form-group">
                    <label for="edit-priority">优先级:</label>
                    <select id="edit-priority">
                        <option value="none">无</option>
                        <option value="low">低</option>
                        <option value="medium">中</option>
                        <option value="high">高</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-tags">标签:</label>
                    <div class="tags-input-container">
                        <input type="text" id="edit-tags" placeholder="添加标签...">
                        <button type="button" id="add-tag-btn">添加</button>
                    </div>
                    <div id="tags-container" class="tags-container">
                        <!-- 标签将在JS中动态添加 -->
                    </div>
                </div>
                <input type="hidden" id="edit-todo-id">
                <div class="form-actions">
                    <button type="submit" class="save-btn">保存</button>
                    <button type="button" class="cancel-btn">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <script src="app.js"></script>
</body>
</html>